#show-info {
    background-color: rgba(240, 248, 255, 0.8);
    margin: 100px auto 0;
    width: 30% ;
    height: 250px;
    text-align: end;
    text-overflow: ellipsis;
    word-wrap: break-word;
    font-size: 25px;
    border-radius: 10px;
    -webkit-border-radius: 20%;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
    -webkit-border-radius: 10px;
    box-shadow: 2px 2px 1px 1px #888888;;
}


.left{
	display: flex;
    flex-flow: row wrap;
    justify-content: space-around;
    align-content: space-around;

}
.op {
    background-color: rgba(0, 191, 255, 0.8);
}
#equal {
    background-color: rgba(143, 188,143,0.8);
}
#equal:hover{
    background-color: rgba(	152,251,152,0.7);
}
button {
    background-color: rgba(245, 245, 245, 0.8);
}
.left button{
    margin: 2px ;
    border-radius: 10px;
    flex-basis: 80px;
    min-height: 60px;
    flex-grow: 1;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
}
.right{
	display: flex;
	flex-direction: column;
}
.right button{
    flex-basis: 60px;
    min-width: 90px;
    margin: 2px;
    border-radius: 10px ;
    -webkit-border-radius: 10px ;
    -moz-border-radius: 10px ;
    -ms-border-radius: 10px ;
    -o-border-radius: 10px ;
}
.keys {
    margin: 0 auto;
    /* border: 1px solid ; */
    display: flex;
    justify-content: center;
    min-height: 300px;
    width: 30%;
    
}
footer {
    position: relative;
    left: 50px;
    bottom: 250px;
}
button:active{
    transform: translate(5px,3px);
    -webkit-transform: translate(5px,3px);
    -moz-transform: translate(5px,3px);
    -ms-transform: translate(5px,3px);
    -o-transform: translate(5px,3px);
}
button.num:hover,.opbtn:hover{
    background-color: rgba(	240,248,255,0.7);
}
button.op:hover{
    background-color: rgba(135,206,250,0.7);
}

